<template>
  <el-form :model="growthRecordForm" ref="growthRecordFormRef" label-width="150px" :key="refresh">
    <el-form-item label="生长周期时长" prop="growthCycle" >
      <span>{{growthStageName[growthStage]}}农作物生长时长共&nbsp;</span>
      <el-input-number
          controls-position="right"
          :clearable="true"
          v-model="growthRecordForm.growthCycle"
          :precision="0"
          :step="1"
          :min="0"
          :max="365"
          style="width: 100px"
          :disabled="onlyRead"
      />
      <span>&nbsp;天</span>
    </el-form-item>
    <el-form-item label="平均光照强度水平" prop="lightDuration" >
      <el-select v-model="growthRecordForm.lightDuration" placeholder="请选择" :disabled="onlyRead">
        <el-option
            v-for="item in scoreOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="环境平均温度" prop="temperature" >
      <el-input-number
          controls-position="right"
          :clearable="true"
          v-model="growthRecordForm.temperature"
          :precision="1"
          :step="1"
          :min="-50"
          :max="50"
          style="width: 100px"
          :disabled="onlyRead"
      />
      <span>&nbsp;℃</span>
    </el-form-item>
    <el-form-item label="生长土壤酸碱度" prop="soilPH" >
      <el-select v-model="growthRecordForm.soilPH" placeholder="请选择" :disabled="onlyRead">
        <el-option
            v-for="item in PHOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="农药喷洒水平" prop="pesticideDose" >
      <el-select v-model="growthRecordForm.pesticideDose" placeholder="请选择" :disabled="onlyRead">
        <el-option
            v-for="item in pesticideDoseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="生长阶段补充描述" porop="otherDescription">
      <el-input
          v-model="growthRecordForm.otherDescription"
          type="textarea"
          :placeholder="'若农作物在'+growthStageName[growthStage]+'遭受过不可控因素侵扰（如：自然灾害）等可在此处添加补充记录'"
          maxlength="255"
          show-word-limit
          :disabled="onlyRead"
      />
    </el-form-item>
    <el-form-item label="填写日期" v-if="onlyRead">
      <span>{{growthRecordForm.collectionDate}}</span>
    </el-form-item>
    <el-form-item v-if="!onlyRead">
      <el-button type="primary" @click="submit">提交{{growthStageName[growthStage]}}阶段记录</el-button>
      <el-button type="danger" @click="resetForm">重置表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {ref, reactive} from 'vue'
import request from "@/http/request";

export default {
  name: "GrowthRecord",
  props: {
    growthStage: {
      type: String,
      default: "该阶段",
    },
    commodityID: {
      type: String,
      default: "",
    },
  },
  watch: {
    growthStage: function(newVal){
      this.growthStageNum = newVal;
      this.getGrowthRecordForm();
    },
    commodityID: function(newVal){
      this.uuid = newVal;
    },
  },
  data() {
    return {
      refresh: false,
      onlyRead: false,
      growthStageNum: this.growthStage,
      uuid: this.commodityID,
      growthRecordFormRef: ref(null),
      growthRecordForm: reactive({
        growthCycle: 0,
        lightDuration: "",
        temperature: 25,
        soilPH: "",
        pesticideDose: "",
        otherDescription: "",
        collectionDate: "",
      }),
    }
  },
  methods: {
    getGrowthRecordForm() {
      const _this = this;
      if (_this.uuid!=="") {
        request({
          "url": "commodity/getCommodityGrowUp",
          "method": "post",
          data: {
            uuid: this.uuid,
            GrowUp: this.growthStageNum.toString(),
          }
        }).then( (response)=> {
          if (response.code === 200) {
            this.onlyRead = true;
            this.growthRecordForm.growthCycle = parseInt(response.data.growthCycle);
            this.growthRecordForm.lightDuration = response.data.lightDuration;
            this.growthRecordForm.temperature = parseFloat(response.data.temperature);
            this.growthRecordForm.soilPH = response.data.soilPH;
            this.growthRecordForm.pesticideDose = response.data.pesticideDose;
            this.growthRecordForm.otherDescription = response.data.otherDescription;
            this.growthRecordForm.collectionDate = response.data.collectionDate;
            this.$tipUtil.successTip(response.msg);
          } else if (response.code === 233) {
            this.$tipUtil.infoTip(response.msg);
          }  else {
            _this.$tipUtil.errTip(response.msg);
          }
        })
      }
    },
    resetForm() {
      try {
        this.$refs.growthRecordFormRef.resetFields();
        this.growthRecordForm.otherDescription = "";
      } catch (e) {
        // 错误处理代码片段
      }
    },
    submit() {
      request({
        url: "/commodity/addCommodityGrowUp",
        method: "post",
        data: {
          uuid: this.uuid,
          growUp: this.growthStageNum.toString(),
          growthCycle: this.growthRecordForm.growthCycle.toString(),
          lightDuration: this.growthRecordForm.lightDuration,
          temperature: this.growthRecordForm.temperature.toString(),
          soilPH: this.growthRecordForm.soilPH,
          pesticideDose: this.growthRecordForm.pesticideDose,
          otherDescription: this.growthRecordForm.otherDescription,
        },
      }).then((response) => {
        if (response.code === 200) {
          this.$tipUtil.successTip(response.msg);
          this.refresh = !this.refresh;
          this.getGrowthRecordForm();
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const growthStageName = ["萌芽期", "生长期", "成熟期"];
    const scoreOptions = [
      { value: '1',
        label: '优秀',
      }, {
        value: '2',
        label: '良好',
      }, {
        value: '3',
        label: '一般',
      }, {
        value: '4',
        label: '不足',
      },
    ];
    const PHOptions = [
      { value: '1',
        label: '碱性',
      },{
        value: '2',
        label: '弱碱性',
      },{
        value: '3',
        label: '中性',
      },{
        value: '4',
        label: '弱酸性',
      },{
        value: '5',
        label: '酸性',
      },
    ];
    const pesticideDoseOptions = [
      { value: '1',
        label: '无农药喷洒',
      },{
        value: '2',
        label: '低于正常值',
      },{
        value: '3',
        label: '正常值',
      },{
        value: '4',
        label: '高于正常值',
      }
    ];
    return {
      growthStageName,
      scoreOptions,
      PHOptions,
      pesticideDoseOptions,
    }
  },
  mounted() {
    this.getGrowthRecordForm();
  }
}
</script>

<style scoped>

</style>